<template>
  <div class="big_box">
    <div v-for="v in goodsdetails" :key="v.id" class="son_box">
      <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
      <div class="somall_sonbox">
        <span>{{ v.name }}</span>
        <span>{{ v.Belong }}</span>
        <span>
          <el-link type="primary">下载</el-link>
          <el-link type="primary" @click="showedit(v.id)">编辑</el-link>
          <el-link type="primary" @click="deletegood(v.id)">删除</el-link>
          <el-link type="primary" @click="showdetails(v.id)">详情</el-link>
        </span>
      </div>
    </div>
    <edit-good :onegooddata="onegooddata" :parentsdata="parentsdata" :dialogvisible="editdialogVisible" @shutdown="shutdownedit" @editdata="editdata" />
    <details-good :onegooddata="onegooddata" :dialogvisible="detailsdialogVisible" @shutdown="shutdowndetail" />
  </div>
</template>

<script>
import { deletegood } from '@/api/commodity.js';
import EditGood from './EditGood.vue';
import DetailsGood from './DetailsGood.vue';
export default {
  components: { EditGood, DetailsGood },
  props: {
    goodsdetails: {
      type: Array,
      required: true,
    },
    parentsdata: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      detailsdialogVisible: false,
      editdialogVisible: false,
      onegooddata: {},

    };
  },
  methods: {
    editdata() {
      this.$emit('updatadata');
      this.editdialogVisible = false;
    },
    showedit(id) {
      this.editdialogVisible = true;
      this.onegooddata = this.goodsdetails.filter(v => v.id === id)[0];
    },
    shutdownedit() {
      this.editdialogVisible = false;
    },
    showdetails(id) {
      this.detailsdialogVisible = true;
      this.onegooddata = this.goodsdetails.filter(v => v.id === id)[0];
    },
    shutdowndetail() {
      this.detailsdialogVisible = false;
    },
    deletegood(val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deletegood(val).then(() => {
          this.$message.success('删除成功');
          this.$emit('updatadata', val);
        }, () => {
          this.$message.error('删除失败');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.big_box{
    // padding-left: 15px;
   .img_box{
        width: 100%;
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
                 .el-image{
                     margin-left: 16px;
                     margin-bottom: 20px;
                    width: 170px!important;
                    height: 150px!important;
                }
    }
    display: flex;
    flex-wrap: wrap;
    .son_box{
        border: 1px solid #ccc;
        width: 210px;
        height: 250px;
        margin-right: 10px;
        margin-bottom: 10px;
        img{
            width: 100%;
            height: 125px;
        }
        .somall_sonbox{
            padding: 15px 15px;
            display: flex;
            flex-direction: column;
        }
    }
    .el-dialog{
        .el-row {
              margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
    }

}
</style>
